<template>
	<div class="searchh" v-show="showState">
		<div class="s-head">
			<img src="../../search-img/s-jiantou.png" class="s-img1"  @click="change"/>
			<div class="s-s">
				<img src="../../search-img/search.png" class="s-img2"/>
				<input type="text" class="s-inp" placeholder="矮大紧指北"/>
			</div>
			<div class="s-spa">搜索</div>
		</div>
		<div class="zjss">
			<span class="zj-spa1">最近搜索</span>
			<span class="zj-spa2">清除记录</span>
		</div>
		<div class="s-neirong">
			<div class="s-d1">今晚80后脱口秀</div>
		</div>
		<div class="zjss">
			<span class="zj-spa1">热门搜索</span>
		</div>
		<div class="remen">
			<div class="re-spa1">司马懿</div>
			<div class="re-spa1">晓 说</div>
			<div class="re-spa1">矮大紧指北</div>
			<div class="re-spa1">今晚80后脱口秀</div>
			<div class="re-spa1">楚乔传</div>
			<div class="re-spa1">蒋 勋</div>
			<div class="re-spa1">郭德纲</div>
			<div class="re-spa1">白鹿原</div>
			<div class="re-spa1">老马饭局</div>
			<div class="re-spa1">权利巅峰</div>
		</div>
	</div>
</template>

<script>
	export default{
		computed:{
			showState(){
				return this.$store.state.bigState;
			}
		},
		methods:{
			change(){
				this.$store.commit('changeStates')
			}
		}
	}
</script>

<style>
	.re-spa1{
		display: inline-block;
		border: solid 0.021739rem black;
		font-size: 0.391304rem;
		text-align: center;
		border-radius: 1.086956rem;
		padding: 0.217391rem 0.217391rem;
		margin-left: 0.192173rem;
		margin-top: 0.156956rem;
	}
	.s-d1{
		/*line-height:0.913043rem ;*/
		text-align: center;
		border-radius: 1.086956rem;
		padding: 0.217391rem 0.217391rem;
		display: inline-block;
		border: solid 0.021739rem black;
		margin-left: 0.152173rem;
		margin-top: 0.086956rem;
		margin-bottom: 0.086956rem;
	}
	.s-neirong{
		font-size: 0.391304rem;
	}
	.zj-spa1{
		margin-left: 0.326086rem;
	}
	.zj-spa2{
		color: #c52938;
		margin-left: 6.326086rem;
	}
	.zjss{
		width: 100%;
		height: 0.891304rem;
		background-color: #eaeaea;
		font-size: 0.369565rem;
		display: flex;
		align-items: center;
	}
	.searchh{
		z-index: 100;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background-color: #f4f5f7;
		/*display: none;*/
	}
	.s-head{
		width: 100%;
		height: 1.565217rem;
		background-color: #fbfbfb;
		display: flex;
		align-items: center;
	}
	.s-img1{
		width: 0.717391rem;
		height: 0.73913rem;
		margin-left: 0.369565rem;
	}
	.s-s{
		width: 7.086956rem;
		height: 0.891304rem;
		background-color: #e3e4e6;
		display: flex;
		align-items: center;
		margin-left: 0.191304rem;
		border-radius: 0.108695rem;
	}
	.s-img2{
		width: 0.565217rem;
		height: 0.608695rem;
		margin-left: 0.208695rem;
	}
	.s-spa{
		font-size: 0.456521rem;
		margin-left: 0.294347rem;
	}
	.s-inp{
		width: 5.008695rem;
		height: 0.543478rem;
		margin-left: 0.158695rem;
		background-color: #e3e4e6;
		border: none;
		outline: none;
		font-size: 0.443478rem;
		padding-left: 0.158695rem;
		color: #c0c1c3;
	}
</style>